.deck-card-detail-popup {
  width: 632px;
  height: 1100px;
  padding-top: 80px;

  .card-detail-container {
    padding: 0 25px;
    height: 920px;
    overflow-y: auto;

    .image-area {
      width: 100%;
      height: 814px;
      background: #4c5055;
      border-radius: 20px;

      > img {
        width: inherit;
      }
    }

    .card-title {
      margin: 17px 0 8px;

      .name {
        height: inherit;
        width: 210px;
        font-size: 30px;
        color: #1f1f1f;
        line-height: 42px;
        margin-right: 80px;
      }

      .card-rarity {
        padding-top: 6px;

        >img {
          height: 28px;
          margin-left: 8px;
        }
      }
    }

    .rule {
      margin: 26px 0 10px;
    }

    .card-attr {
      height: 42px;
      margin: 10px 0;

      > span {
        padding: 0 25px;
        height: inherit;
        text-align: center;
        line-height: 40px;
        border: 2px solid #1f1f1f;
        border-radius: 10px;
        margin-right: 10px;
      }
    }
  }

  .pagination-paper-container {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    box-shadow: 0 -4px 8px 0 rgb(0 0 0 / 4%);
    border-radius: 0 0 30px 30px;
    padding: 0 10px;

    .pagination-item-link {
      width: 250px;
      height: 76px;
      background: linear-gradient(180deg, #efedff 0%, #dddbfd 100%);
      border-radius: 38px;
      font-size: 30px;
      color: #be73ff;
      text-align: center;
      line-height: 76px;
      transition: all 0.2s;

      &.disabled {
        background: #f5f4ff;
        border-radius: 38px;
        color: #e4c9fb;
      }
    }

    .pagination-item-num {
      font-size: 40px;
      color: #be73ff;
    }
  }
}
